import styled from 'styled-components'

export const HomeWrapper = styled.div`
/* overflow: hidden; */
width: 960px;
margin: 0 auto;
height: 300px;
/* background: red; */
`

export const HomeLeft = styled.div`
float: left;
margin-left: 15px;
padding-top: 30px;
width: 625px;
.banner-img{
    width: 625px;
    height: 270px;
}
`

export const HomeRight = styled.div`
float: right;
width: 280px;
padding-top: 30px;
`

export const TopicWrapper = styled.div`
overflow: hidden;
padding: 20px 0 10px 0;
border-bottom: 1px solid #dcdcdc;
`

export const TopicItem = styled.div`
float: left;
height: 32px;
line-height: 32px;
padding-right: 10px;
margin: 0 18px 18px 0;
background: #f7f7f7;
font-size: 14px;
border: 1px solid #dcdcdc;
border-radius: 4px;
.topic-pic{
    display: block;
    float: left;
    width:32px;
    height: 32px;
    margin-right: 10px;
}
`

export const ListItem = styled.div`
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #dcdcdc;
.pic{
    display: block;
    float: right;
    width: 125px;
    height: 100px;
    border-radius: 10px;
}
`

export const ListInfo = styled.div`
width: 500px;
float: left;
.title{
    line-height: 27px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.desc{
    line-height: 24px;
    font-size: 13px;
    color: #999;
}
`

export const RecommendWrapper = styled.div`
margin-bottom: 30px;
width: 280px;
`

export const RecommendItem = styled.div`
width: 280px;
height: 50px;
margin-bottom: 10px;
background: url(${(props) => props.imgUrl});
background-size: contain;
`

export const LoadMore = styled.div`
width: 100%;
height: 40px;
line-height: 40px;
margin: 30px 0;
background: #a5a5a5;
text-align: center;
border-radius: 20px;
color: #fff;
cursor: pointer;
`

export const BackTop = styled.div`
position:fixed;
right: 60px;
bottom: 30px;
width: 40px;
height: 50px;
line-height: 24px;
text-align: center;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
`